<template>
  <div class="loading">
    <pulse-loader :color="color" :loading="loading" :size="size"></pulse-loader>
  </div>
  <!--<grid-loader :color="color" :loading="loading" :size="size"></grid-loader>
  <clip-loader :color="color" :loading="loading" :size="size"></clip-loader>
  <rise-loader :color="color" :loading="loading" :size="size"></rise-loader>
  <beat-loader :color="color" :loading="loading" :size="size"></beat-loader>
  <sync-loader :color="color" :loading="loading" :size="size"></sync-loader>
  <rotate-loader :color="color" :loading="loading" :size="size"></rotate-loader>
  <fade-loader :color="color" :height="height" :loading="loading" :width="width"></fade-loader>
  <pacman-loader :color="color" :loading="loading" :size="size"></pacman-loader>
  <square-loader :color="color" :loading="loading" :size="size"></square-loader>
  <scale-loader :color="color" :height="height" :loading="loading" :width="width"></scale-loader>
  <skew-loader :color="color" :loading="loading" :size="size"></skew-loader>
  <moon-loader :color="color" :loading="loading" :size="size"></moon-loader>
  <ring-loader :color="color" :loading="loading" :size="size"></ring-loader>
  <bounce-loader :color="color" :loading="loading" :size="size"></bounce-loader>
  <dot-loader :color="color" :loading="loading" :size="size"></dot-loader>-->
</template>

<script>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'

export default {
  name: 'Loading',
  components: {
    PulseLoader
  },
  data () {
    return {
      loading: true,
      color: '#5dc596',
      size: '15px',
      height: '200px',
      width: '200px',
    }
  },
  mounted () {
    setTimeout(() => {

    }, 10000)
  }
}
</script>

<style lang="less" scoped>
.loading {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/deep/ .v-spinner {

}
</style>
